<template>
  <div class="demo">
    <div class="demo-title">搜索框</div>
    <div class="demo-content">
      <Select
        v-model:value="value"
        show-search
        placeholder="input search text"
        style="width: 200px"
        :default-active-first-option="false"
        :show-arrow="false"
        :filter-option="false"
        :not-found-content="null"
        :options="data"
        @search="handleSearch"
        @change="handleChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import jsonp from 'fetch-jsonp';
  import qs from 'qs';
  import Select from '@sscd/select';
  let timeout: any;
  let currentValue = '';
  function fetch(value: string, callback: any) {
    if (timeout) {
      clearTimeout(timeout);
      timeout = null;
    }
    currentValue = value;
    function fake() {
      const str = qs.stringify({
        code: 'utf-8',
        q: value,
      });
      jsonp(`https://suggest.taobao.com/sug?${str}`)
        .then((response) => response.json())
        .then((d) => {
          if (currentValue === value) {
            const { result } = d;
            const data: any[] = [];
            result.forEach((r: any) => {
              data.push({
                value: r[0],
                label: r[0],
              });
            });
            callback(data);
          }
        });
    }
    timeout = setTimeout(fake, 300);
  }
  const data = ref<any[]>([]);
  const value = ref();
  const handleSearch = (val: string) => {
    fetch(val, (d: any[]) => {
      data.value = d;
    });
  };
  const handleChange = (val: string) => {
    console.log(val);
    value.value = val;
    fetch(val, (d: any[]) => {
      data.value = d;
    });
  };
</script>
